<template>
	<div class="payment pl30 pr30">
		<div class="mt20 bg-fff" style="overflow: hidden;padding:0.3rem;border-radius:0.1rem;">
			<div class="pic"> </div>
			<div class="fs30 c-333 t-a-c">网卡</div>
			<div class="c-flex pt10 pb10 c-a-c">
				<div class="c-box-flex fs26 c-999">白条余额</div>
				<div class="fs26 c-333"><span class="fs26">￥</span><span class="fs40">1000</span></div>
			</div>
			<div class="c-flex pt10 pb10 c-a-c">
				<div class="c-box-flex fs26 c-999">充值金额</div>
				<div class="fs26 c-333"><span class="fs26">￥</span><span class="fs40">1000</span></div>
			</div>
			<div class="c-flex pt10 pb10 c-a-c">
				<div class="c-box-flex fs26 c-999">优惠券</div>
				<div class="fs26 c-333">
					<span class="yellow">有可用上网券</span>
					<span class="c-999">暂无可用优惠券</span>
					<i class="iconfont icon-gengduo c-999"></i>
				</div>
			</div>
			<div class="c-flex pt10 pb10 c-a-c">
				<div class="c-box-flex fs26 c-999">实付金额</div>
				<div class="fs26 c-333"><span class="fs26">￥</span><span class="fs40">1000</span></div>
			</div>
			<div class="c-flex pt10 pb10 c-a-c">
				<div class="c-box-flex fs26 c-999">
					<input type="text" placeholder="请输入验证码" class="payment-input fs20">
				</div>
				<div class="btn yellow c-flex c-aj-c">{{text}}</div>
			</div>
		</div>

		<div class="yellow-btn pay-btn" @click="pay">立即支付</div>
		<div class="mask" v-if="mask"></div>
		<div class="msg-box" v-if="mask">
			<div class="fs30 c-333 t-a-c">温馨提示</div>
			<div class="fs28 c-333 t-a-c" style="line-height:0.6rem">检测到您未开通白条无法进行支付，是否进行开通白条</div>
			<div class="c-flex mt15 fs26">
				<div class="c-box-flex yellow msg-btn" style="border:1px solid #FFC00C;border-radius:0.06rem">下次再说</div>
				<div class="c-box-flex yellow-btn msg-btn c-fff">立即开通</div>
			</div>
		</div>
	</div>

</template>

<script>
export default {
  name: "payment",
  data() {
    return {
	  text: "获取验证码",
	  mask:false
    };
  },
  mounted() {},
  methods: {
    pay() {}
  }
};
</script>
<style lang="less" scoped>
.pic {
  width: 1.56rem;
  height: 1.56rem;
  background: #aaa;
  border-radius: 50%;
  margin: 0.2rem auto 0.15rem auto;
}

.btn {
  width: 1.8rem;
  height: 0.6rem;
  border: 1px solid #ffb705;
  border-radius: 0.06rem;
  margin-left: 0.3rem;
}

.payment-input {
  width: 100%;
  height: 0.6rem;
  border: 1px solid #ddd;
  padding-left: 0.1rem;
  border-radius: 0.06rem;
}
.yellow-btn {
  &.pay-btn {
    margin-top: 0.3rem;
    height: 0.72rem;
    line-height: 0.72rem;
    text-align: center;
    font-size: 0.32rem;
    color: #fff;
    width: 100%;
  }
}

.mask {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 1);
  opacity: 0.2;
}

.msg-box {
  width: 6.2rem;
  padding: 0.5rem 0.8rem;
  background: rgba(245, 247, 250, 1);
  border-radius: 0.2rem;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
}

.msg-btn{
	line-height: 0.6rem;
	text-align: center;
	line-height: 0.6rem;
	margin: 0 0.15rem
}
</style>
